<template>
    <div class="sidebar">

        <el-menu class="sidebar-el-menu" :collapse="collapse" :default-active="onRoutes" background-color="#333645"
                 text-color="#ffffff"  unique-opened router>
            <label v-for="item in items" :key="item.path">
                <el-menu-item class="item1-slider1" :index=item.path v-if="!item.children" v-show="item.menuShow"
                              @click="getMenuId(item.id)">
                    <i class="iconfont" :class="item.iconName" style="width: 15px;"></i>
                    <span slot="title">{{ item.name}}</span>
                </el-menu-item>
                <el-submenu class="item1-slider2" :index=item.path v-else v-show="item.menuShow">
                    <template slot="title">
                        <i class="el-icon-share" style="width: 15px;"></i>
                        <span slot="title">{{ item.name}}</span>
                    </template>
                    <label v-for="(item1,index1) in item.children" :key="index1">
                        <el-menu-item class="item2-slider1" :index=item1.path v-if="!item1.children"
                                      v-show="item1.menuShow" @click="getMenuId(item1.id)">
                            <span slot="title">{{ item1.name}}</span>
                        </el-menu-item>
                        <el-submenu class="item2-slider2" :index=item1.path v-else v-show="item1.menuShow">
                            <template slot="title">
                                <span slot="title">{{ item1.name}}</span>
                            </template>
                            <label v-for="(item2,index2) in item1.children" :key="index2">
                                <el-menu-item class="item3-slider1" :index=item2.path v-if="!item2.children"
                                              v-show="item2.menuShow" @click="getMenuId(item2.id)">
                                    <span slot="title">{{ item2.name}}</span>
                                </el-menu-item>
                                <el-submenu class="item3-slider2" :index=item2.path v-else v-show="item2.menuShow">
                                    <template slot="title">
                                        <span slot="title">{{ item2.name}}</span>
                                    </template>
                                    <label v-for="(item3,index3) in item2.children" :key="index3">
                                        <el-menu-item class="item4-slider1" :index=item3.path v-if="!item3.children"
                                                      v-show="item3.menuShow" @click="getMenuId(item3.id)">
                                            <span slot="title">{{ item3.name}}</span>
                                        </el-menu-item>
                                        <el-submenu class="item4-slider2" :index=item3.path v-else
                                                    v-show="item3.menuShow">
                                            <template slot="title">
                                                <span slot="title">{{ item3.name}}</span>
                                            </template>
                                            <label v-for="(item4,index4) in item3.children" :key="index4">
                                                <el-menu-item class="item5-slider1" :index=item4.path
                                                              v-show="item4.menuShow" @click="getMenuId(item4.id)">
                                                    <span slot="title">{{ item4.name}}</span>
                                                </el-menu-item>
                                            </label>
                                        </el-submenu>
                                    </label>
                                </el-submenu>
                            </label>
                        </el-submenu>
                    </label>
                </el-submenu>
            </label>
        </el-menu>
    </div>
</template>

<script>
    import bus from '../common/bus';
    export default {
        data() {
            let menus = JSON.parse(localStorage.getItem('menus'));
            menus.unshift({
                path: '/dashboard',
                menuShow: true,
                name: '系统首页',
                children: null,
                component:'index',
                iconName:'icon-index',
                id: 1
            });
            console.log(menus);
            menus.forEach(e => {
                e.iconName='icon-'+e.component;
            });
            return {
                collapse: false,
                items: menus
            }
        },
        computed: {
            onRoutes() {
                return this.$route.path;
            }
        },
        methods: {
            collapseChage() {
                this.collapse = !this.collapse;
                bus.$emit('collapse', this.collapse);
            },
            getMenuId(id) {
                sessionStorage.removeItem('menuId');
                sessionStorage.setItem('menuId', id);
                console.log(sessionStorage.getItem('menuId'));
            }
        },
        created() {
            bus.$on('collapse', msg => {
                this.collapse = msg;
            })
        }
    }
</script>

<style scoped>
.sidebar{
    position: relative;
    height: 100%;
    width:100%;
    background: #333645;
    box-sizing: border-box;
}
.el-menu-item.is-active {
   background-color: #3ac1c4 !important;
   color:#fff;
}

</style>
